<template>
	<view style="overflow: hidden;">
		<view class="FoodRecommendation" v-if="!parameter.layout || parameter.layout == 1 || parameter.layout == 2"
			:style="{
				'--font_color': parameter.font_color || '#eeeeee',
				'--title_color': parameter.title_color || '#333',
				'--tip_color': parameter.tip_color || '#a1a1a1',
				'--bgColor': parameter.bgColor || '#fff'
			}">
			<view :class="['info_item', parameter.layout == 2 ? 'rever' : '']" v-for="(item, index) in dataList"
				:key="index" @click="open(item)">
				<view class="item_img">
					<image :src="formatPictureImg(item.logo)" mode="aspectFill"></image>
				</view>
				<view class="details">
					<view class="title u-line-2">{{ item.name }}</view>
					<view v-if="parameter.subTitle == 1" class="sub_title u-line-3">
						{{ item.title }}
					</view>
					<view class="video-bottom" v-else>
						<view class="detail_time">{{ item.date_creation | format() }}</view>
						<view class="see_tem see_main" v-if="vuex_config.reading_volume == 1 && item.view > 0">
							{{ item.view }}阅读
						</view>
						<view class="see_tem see_box" v-if="vuex_config.reading_volume == 1 && item.view > 0">
							<u-icon class="see_icon" name="eye"></u-icon>
							<text class="view_num">{{ item.view }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="col_main" v-else-if="parameter.layout == 3">
			<view class="col_item" v-for="(item, index) in dataList" :key="index" @click="open(item)">
				<view class="img_box">
					<u-lazy-load class="img_view" imgMode="aspectFill" :image="formatPictureImg(item.logo)">
					</u-lazy-load>
					<view v-if="item.voide ? true : false" class="iconfont iconfont-e615"></view>
				</view>
				<view class="col_cont">
					<view class="u-line-2">{{ item.name }}</view>
					<view class="col_bot">
						<view class="col_time">{{ item.date_creation | format() }}</view>
						<view class="people" v-if="vuex_config.reading_volume == 1 && item.view > 0">{{ item.view }}阅读
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="swiper_view_main scroll_4" v-else-if="parameter.layout == 4">
			<scroll-view scroll-x class="scroll_view">
				<view class="scroll_item" v-for="(item, index) in dataList" :key="index" @click="open(item)">
					<view class="scroll_4_box">
						<view class="scroll_img">
							<u-lazy-load class="img_view" imgMode="aspectFill" :image="formatPictureImg(item.logo)">
							</u-lazy-load>
							<view class="icon_box" v-if="item.voide ? true : false">
								<view class="iconfont iconfont-e615"></view>
							</view>
						</view>
						<view class="name">{{ item.name }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view :class="['swiper_view_main scroll_5',parameter.subTitle == 1 ? '' : 'no_sub_title']"
			v-else-if="parameter.layout == 5">
			<scroll-view scroll-x class="scroll_view">
				<view class="scroll_item1" v-for="(item, index) in dataList" :key="index" @click="open(item)">
					<view class="scoll_5_box">
						<view class="scroll_img">
							<u-lazy-load class="img_view" :border-radius="100" imgMode="aspectFill"
								:image="formatPictureImg(item.logo)"></u-lazy-load>
							<view class="icon ">{{ substring(item.name,4) }}</view>
						</view>
						<view class="name">{{ substring(item.title,8 )}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="edit_view_main" v-else-if="parameter.layout == 6">
			<view class="edit_view_box" v-for="(item, index) in dataList" :key="index">
				<view class="edit_title" @click="open(item)">
					<view class="edit_name">{{ item.name }}</view>
					<view class="edit_time">{{ item.date_creation | format('YYYY-MM-DD HH:mm:ss') }}</view>
				</view>
				<view class="edit_box">
					<view class="cont show_all" @click="open(item)">
						<u-parse :html="item.details"></u-parse>
						<view class="img_list" v-if="item.img">
							<view class="img_item" @click.stop="preImg(imgIndex, item.img)"
								v-for="(imgItem, imgIndex) in item.img.split(',')" :key="imgIndex">
								<image class="img_img" :src="imgItem"></image>
							</view>
						</view>
						<view class="com_list" v-if="item.comment_list && item.comment_list[0]">
							<view v-for="(comItem, comIndex) in item.comment_list" :key="comIndex" class="com_item">
								<view class="head">
									<image :src="comItem.headimgurl"></image>
								</view>
								<view class="com_box">
									<view class="nick_name">
										<view class="com_nick">{{ comItem.nickname }}</view>
										<view class="com_time">
											{{ comItem.date_creation | format('YYYY-MM-DD HH:mm:ss') }}
										</view>
									</view>
									<view class="com_cont">{{ comItem.content }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="informations-list" v-else-if="parameter.layout == 7">
			<view class="list_item" v-for="(item, index) in dataList" :key="index" @click="open(item)">
				<view class="item-img">
					<u-lazy-load class="img_view" imgMode="aspectFill" :image="formatPictureImg(item.logo)">
					</u-lazy-load>
				</view>
				<view class="item-box">
					<view class="box-title u-line-2">{{item.name}}</view>
					<view v-if="item.title?true:false" class="box-ftitle">{{ item.title }}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		formatDate
	} from '@/utils/moment/index.js';
	import {
		uniPreview
	} from '@/utils/uniPromise';
	export default {
		props: {
			parameter: {
				type: Object,
				default: () => {
					return {};
				}
			},
			dataList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				showCurrent: -1,
			};
		},
		filters: {
			format(data, str = 'YYYY/MM/DD') {
				return formatDate(data, str);
			}
		},
		mounted() {},
		computed: {
			substring(val, num) {
				return (val, num) => {
					return val.length > num ? val.substring(0, num) : val
				}
			},
		},
		methods: {
			open(item) {
				console.log('item',item)
				if (item.mode == 7 && item.pro_list) {
					let path = ''
					let params = ''
					let query = {}
					path = item.pro_list.split('?')[0]
					if (item.pro_list.split('?')[1]) {
						params = item.pro_list.split('?')[1]
					}
					if (params) {
						params.split('&').map((str) => {
							let objArr = str.split('=')
							query[objArr[0]] = objArr[1]
						})
					}
					let url = `/package/index/webView/index?path=${path}&query=${JSON.stringify(query)}`
					this.$linkTo(url);
				} else {
					this.$linkTo(`/package/league/detail/index?id=${item.pk_id}`, 'navigateTo');
				}
			},
			goChange(index) {
				if (this.showCurrent == index) {
					this.showCurrent = -1;
				} else {
					this.showCurrent = index;
				}
			},
			preImg(index, imgs) {
				uniPreview(index, imgs.split(','));
			}
		}
	};
</script>
<style scoped lang="scss">
	.FoodRecommendation {
		background-color: var(--bgColor);
		padding: 0 30rpx 0;

		.info_item {
			display: flex;
			padding: 28rpx 0;
			border-bottom: 1rpx solid var(--font_color);

			&:last-of-type {
				border: none;
			}

			&.rever {
				flex-direction: row-reverse;

				.item_img {
					margin: 0 0 0 16rpx;
				}

				.video-bottom {
					justify-content: flex-start;
					color: var(--tip_color);

					.detail_time {
						margin-right: 20rpx;
					}

					.see_box {
						display: none;
					}

					.see_main {
						display: block;
					}
				}
			}
		}

		.item_img {
			width: 230rpx;
			height: 148rpx;
			margin-right: 18rpx;
			border-radius: 10rpx;
			overflow: hidden;
		}

		.details {
			flex: 1;
			overflow: hidden;
			display: flex;
			flex-direction: column;

			.title {
				color: var(--title_color);
				font-size: 28rpx;
				line-height: 38rpx;
				margin-top: 8rpx;
			}

			.sub_title {
				color: var(--tip_color);
				margin-top: 10rpx;
				white-space: pre-wrap;
				font-size: 24rpx;
			}
		}

		.video-bottom {
			display: flex;
			justify-content: space-between;
			margin-top: auto;
			color: var(--tip_color);

			.detail_time {
				font-size: 26rpx;
			}

			.see_tem {
				display: flex;
				align-items: center;
			}

			.see_main {
				display: none;
			}

			.see_box {
				.see_icon {
					font-size: 34rpx;
					font-weight: bold;
					margin-right: 10rpx;
				}

				.view_num {
					font-size: 26rpx;
				}
			}
		}
	}

	.col_main {
		position: relative;
		padding: 10rpx 24rpx 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;

		.col_item {
			width: calc(50% - 12rpx);
			background-color: #fff;
			margin-bottom: 24rpx;
			display: flex;
			flex-direction: column;
			border-radius: 10rpx;
			overflow: hidden;
		}

		.img_box {
			position: relative;
			width: 100%;
			padding-bottom: 100%;
			height: 0;

			.img_view {
				position: absolute;
				width: 100%;
				height: 100%;
			}

			.iconfont {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #fff;
				font-size: 76rpx;
			}
		}

		.col_cont {
			flex: 1;
			overflow: hidden;
			padding: 10rpx 10rpx 14rpx;
			display: flex;
			flex-direction: column;

			.col_bot {
				margin-top: auto;
				padding-top: 10rpx;
				font-size: 24rpx;
				color: #999;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}

	.swiper_view_main {
		background-color: #fff;

		.scroll_view {
			white-space: nowrap;
			overflow: hidden;
		}
	}

	.scroll_4 {
		padding: 5px 12px;

		.scroll_view {
			height: 174px;

			.scroll_item {
				margin-right: 11px;
				display: inline-block;
				width: 251px;
				height: 100%;

				&:nth-last-child(1) {
					margin-right: 0;
				}

				.scroll_4_box {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 4px 4px 8px 4px;
					border: 1px solid #f2f2f2;
					border-radius: 5px;
				}

				.scroll_img {
					position: relative;
					height: 0;
					width: 100%;
					padding-bottom: 55.8%;

					.img_view {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						border-radius: 5px;
						overflow: hidden;
					}

					.icon_box {
						background-color: rgba(0, 0, 0, 0.3);
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;

						.iconfont {
							color: #fff;
							font-size: 38px;
						}
					}
				}

				.name {
					font-size: 14px;
					color: #000;
					font-weight: bold;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.scroll_5 {
		padding: 16rpx 24rpx;
		$h: 100px;

		&.no_sub_title {
			.scroll_view {
				height: $h;
			}

			.name {
				display: none;
			}
		}

		.scroll_view {
			height: 126px;
		}

		.scroll_item1 {
			margin-right: 22rpx;
			display: inline-block;
			width: 200rpx;
			height: 100%;

			&:nth-last-child(1) {
				margin-right: 0;
			}

			.scoll_5_box {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.scroll_img {
				position: relative;
				height: $h;
				width: 100%;

				.img_view {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					overflow: hidden;
				}

				.icon {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 75px;
					height: 22px;
					line-height: 22px;
					text-align: center;
					background-color: #f5222d;
					color: #fff;
					border-radius: 12px 0 12px 0;
					overflow: hidden;
					font-size: 12px;
					padding: 0 8px;
					letter-spacing: 1px;
				}
			}

			.name {
				padding-bottom: 2px;
				font-size: 12px;
				color: #000;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
			}
		}
	}

	.edit_view_main {
		.edit_view_box {
			margin-bottom: 20rpx;
			background-color: #fff;
			padding: 20rpx 30rpx;
		}

		.edit_title {
			.edit_name {
				font-weight: bold;
				font-size: 30rpx;
			}

			.edit_time {
				color: #999;
				font-size: 24rpx;
			}
		}

		.other_box {
			font-size: 24rpx;
			color: #999;
			display: flex;
			align-items: center;

			.other_view {
				margin-left: 20rpx;
			}
		}

		.cont {
			margin-top: 10rpx;
			max-height: 202rpx;
			overflow: hidden;
			position: relative;

			.img_list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 26rpx;
				padding: 0 20rpx;

				.img_item {
					width: 31%;
					height: 0;
					padding-right: 10rpx;
					position: relative;
					padding-bottom: 31%;
					margin-right: 3.5%;

					&:nth-of-type(3n) {
						margin-right: 0;
					}

					.img_img {
						width: 100%;
						height: 100%;
						position: absolute;
						left: 0;
						top: 0;
					}
				}
			}

			.com_list {
				margin-top: 26rpx;
				background-color: #f7f7f7;
				padding: 16rpx 16rpx 0;
				position: relative;

				&::before {
					display: block;
					content: '';
					position: absolute;
					top: -18rpx;
					left: 24rpx;
					width: 0;
					height: 0;
					border-left: 18rpx solid transparent;
					border-right: 18rpx solid transparent;
					border-bottom: 18rpx solid #f7f7f7;
				}
			}

			.com_item {
				display: flex;
				padding-bottom: 16rpx;

				.head {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					margin-right: 16rpx;
					overflow: hidden;
					background-color: #f5f5f5;
				}

				.com_box {
					flex: 1;
					overflow: hidden;
					font-size: 26rpx;

					.nick_name {
						height: 40rpx;
						display: flex;
						align-items: center;
						margin-bottom: 6rpx;

						.com_nick {
							flex: 1;
							overflow: hidden;
						}

						.com_time {
							color: #999;
							font-size: 24rpx;
						}
					}
				}
			}

			&.show_all {
				max-height: 100%;

				.iconfont {
					transform: rotate(180deg);
				}
			}

			.sign {
				line-height: 1;
				font-size: 24rpx;
			}
		}
	}

	.informations-list {
		padding: 10rpx 24rpx 0;
		width: 100%;

		.list_item {
			padding-bottom: 20rpx;
			width: 100%;
			display: flex;
			flex-direction: column;

			.item-img {
				width: 100%;
				height: 300rpx;
			}

			.item-box {
				background-color: #fff;
				padding: 10rpx 0 20rpx;
				display: flex;
				flex-direction: column;

				.box-title {
					color: #333;
					font-weight: bold;
					width: 100%;
					font-size: 30rpx;
				}

				.box-ftitle {
					margin-top: 4rpx;
					color: #999;
					font-size: 24rpx;
					width: 100%;
					white-space: pre-wrap;
				}
			}
		}
	}
</style>
